var lis = document.querySelectorAll(".wrapper li");
var lefbut = document.querySelector(".leftbut");
var rigbut = document.querySelector(".rigbut");
var spans = document.querySelectorAll(".wrapper span");
var wrapper = document.querySelector(".wrapper")


var ln = 0; //上一次的位子
var cn = 0; //鼠标点击的位置
for (let i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
        cn = i
        onchang()
    }
}

function onchang() {
    spans[ln].className = "";
    spans[cn].className = "artive";
    lis[ln].className = "";
    lis[cn].className = "artive"
    ln = cn
}

lefbut.onclick = function() {
    cn--;
    if (cn < 0) {
        cn = lis.length - 1;
    }
    onchang()
}

rigbut.onclick = function() {
    cn++;
    if (cn > lis.length - 1) {
        cn = 0;
    }
    onchang()
}

var timer = setInterval(() => {
    rigbut.onclick()
}, 2000);

wrapper.onmouseover = function() {
    clearInterval(timer);
    rigbut.style.display = "block";
    lefbut.style.display = "block";
}
wrapper.onmouseout = function() {
    timer = setInterval(() => {
        rigbut.onclick()
    }, 2000);
    rigbut.style.display = "none";
    lefbut.style.display = "none";
}